<template>
  <div class="block iconfont" :class="{
    proto: triggered === 0,
    [itemClass]: triggered === 1,
    [signClass]: triggered === 0,
    'mine-trig': item === -1 && userTrigger
  }" 
  >
  {{triggered && item || ''}}
  </div>
</template>

<script>
import '../../public/font/iconfont.css'
import { computed, defineComponent, toRefs } from 'vue'


export default defineComponent({
    // 因为直接解构props会消除响应式（proxy），所以应当使用toRefs来转换
    // 总之，vue3的路就是保持响应式的路
    props: {
      blockItem: {
        type: Object,
        required: true
      }
    },

    setup(props) {
    const { blockItem } = toRefs(props)
    const { item, sign, triggered, userTrigger } = toRefs(blockItem.value)
    const itemClass = computed(() => {
      if (item.value === -1) {
        return 'icon-bomb'
      }
      return `n${item.value}`
    })
    const signClass = computed(() => {
      if(sign.value === 1) {
        return 'icon-flag'
      }
      if(sign.value === 2) {
        return 'icon-question'
      }
      return 'icon'
    })
    return {
      item,
      sign,
      triggered,
      userTrigger,
      itemClass,
      signClass
    }
  }
})

</script>
<style scoped>
  .block {
    width: 25px;
    height: 25px;
    border: 1px solid #aaa;
    box-sizing: border-box;
    background: #ccc;
  }
  .proto {
    border: 4px solid #aaa;
    border-top: 4px solid #eee;
    border-left: 4px solid #eee;
    line-height: 17px;
  }
  .n1 {
    color: #391a3d;
  }
  .n2 {
    color: #34234e;
  }
  .n3 {
    color: #2f2c5f;
  }
  .n4 {
    color: #2a3671;
  }
  .n5 {
    color: #243f82;
  }
  .n6 {
    color: #1f4893;
  }
  .n7 {
    color: #1a51a4;
  }
  .n8 {
    color: #155bb6;
  }
  .n1, .n2, .n3, .n4, .n5, .n6, .n7, .n8{
    font-weight: 700;
    line-height: 23px;
    text-align: center;
  }
  .icon-flag {
    color: red;
  }
  .icon-bomb {
    line-height: 25px;
  }
  .mine-trig {
    background-color: #e00;
  }
</style>